<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Turf.js 常用 API 演示</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #container { display: flex; height: 100vh; }
        #menu { width: 300px; padding: 20px; overflow-y: auto; background-color: #f0f0f0; }
        #map { flex: 1; }
        .example-btn { 
            display: block; 
            margin: 10px 0; 
            padding: 10px; 
            background-color: #4CAF50; 
            color: white; 
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            text-align: left;
            font-size: 14px;
        }
        .example-btn:hover { background-color: #45a049; }
        h1 { margin-top: 0; font-size: 1.5em; }
        h2 { font-size: 1.2em; margin-top: 20px; }
        .description { font-size: 14px; margin-bottom: 15px; }
    </style>
</head>
<body>
    <div id="container">
        <div id="menu">
            <h1>Turf.js 常用 API 演示</h1>
            <p class="description">点击下方按钮查看 Turf.js 常用功能的实际应用场景</p>
            
            <h2>测量类</h2>
            <button class="example-btn" onclick="showDistance()">距离计算 (distance)</button>
            <button class="example-btn" onclick="showArea()">面积计算 (area)</button>
            
            <h2>点操作</h2>
            <button class="example-btn" onclick="showPointsWithin()">点包含判断 (pointsWithin)</button>
            <button class="example-btn" onclick="showNearestPoint()">最近点查找 (nearest)</button>
            
            <h2>缓冲区分析</h2>
            <button class="example-btn" onclick="showBuffer()">缓冲区生成 (buffer)</button>
            
            <h2>空间分析</h2>
            <button class="example-btn" onclick="showIntersect()">相交分析 (intersect)</button>
            <button class="example-btn" onclick="showUnion()">合并多边形 (union)</button>
            
            <h2>聚合与简化</h2>
            <button class="example-btn" onclick="showCluster()">点聚合 (clustersKmeans)</button>
            <button class="example-btn" onclick="showSimplify()">线简化 (simplify)</button>
            
            <h2>格网生成</h2>
            <button class="example-btn" onclick="showHexGrid()">六边形格网 (hexGrid)</button>
            
            <div id="description-panel" style="margin-top: 20px; padding: 10px; background-color: #e0e0e0; border-radius: 5px;">
                <h3 style="margin-top: 0;">应用场景描述</h3>
                <p id="scene-description">点击左侧按钮查看各功能的应用场景描述...</p>
            </div>
        </div>
        <div id="map"></div>
    </div>

    <script src="main.js"></script>
</body>
</html>
